<template>
	<view class="">
		<view class="customer">
			<u-gap height="40rpx" />
			<picker mode="date" :value="date" fields="year" @change="bindDateChange">
				<view class="flex_wrap row_middle" @click="show = true">
					<text style="font-size:28rpx">{{newYear}}年</text>
					<u-icon name="arrow-down-fill" color="#666666" size="11"></u-icon>
				</view>
			</picker>
			<!-- 对应数据 -->
			<view class="customer_infos" v-for="(item, index) in MyTeamByYearList" :key="index"
				v-if="MyTeamByYearList.length!== ''">
				<view class="enterprise_tops flex_wrap row_middle">
					<text class="enterprise_bg"></text>
					<u--text :text="item.currentYue+'月'" size='32rpx' blod />
				</view>
				<view class="customer_info_detail">
					<image class="customer_info_img"
						src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/7273cd699a3244618d151fff1f963ed2.png"
						mode=""></image>
					<view class="customer_info ">
						<view class="manage_team_time flex_wrap row_middle">
							<u--text :text="item.currentDate" color="#fff" size="32rpx" blod />
						</view>
						<view class="dashed"></view>
						<view class="team_detail_info flex_wrap row_middle">
							<u--text text="已办会议" color="#fff" size="24rpx" />
							<u--text :text="item.hostCount+'场'" color="#fff" size="36rpx" blod />
						</view>
						<view class="team_detail_info flex_wrap row_middle">
							<u--text text="礼品领取" color="#fff" size="24rpx" />
							<u--text :text="item.receiveCount+'份'" color="#fff" size="36rpx" blod />
						</view>
						<view class="team_detail_info flex_wrap row_middle">
							<u--text text="会议签到" color="#fff" size="24rpx" />
							<u--text :text="item.signCount +'人'" color="#fff" size="36rpx" blod />
						</view>
					</view>
				</view>
			</view>

			<view v-if="MyTeamByYearList.length == ''">
				<view class="headImage"><u-image
						src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
						width="408rpx" height="408rpx" /></view>
				<u-text text="暂无数据" color="#999" size="22rpx" align="center"></u-text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		MyTeamByYear
	} from '@/api/manageSalesman';
	export default {
		data() {
			return {
				date: '',
				refresherStatus: 0,
				newYear: '',
				show: false,
				MyTeamByYearList: [],
				Month: []
			}
		},
		onReady() {},
		onLoad() {
			var date = new Date();
			let newYear = date.getFullYear(); //获取完整的年份(4位)
			this.newYear = newYear
			setTimeout(() => {
				this.getMyTeamByYear(newYear)
			}, 500)
		},
		methods: {
			bindDateChange(e) {
				this.newYear = e.target.value;
				let newYear = e.target.value;
				this.getMyTeamByYear(newYear)
			},
			async getMyTeamByYear(year) { //年份对应内容
				const res = await MyTeamByYear(year)
				if (res.code === 200) {
					this.MyTeamByYearList = res.data
					res.data.forEach(item => {
						let yue = item.currentDate.split(".");
						let danyue = yue[1];
						if (danyue < 10) {
							danyue = danyue.split("0")
							danyue = danyue[1]
							item.currentYue = danyue
						} else {
							item.currentYue = danyue
						}
					})
					this.MyTeamByYearList.reverse()
					var Month = []
					Month.push('item.currentDate')
				}
			},
		},
	}
</script>

<style>
	.customer {
		width: 100%;
		height: 100vh;
		color: #333333;
		background-color: #FFFFFF;
		padding: 0 28rpx;
	}

	// 对应数据
	.customer_infos {
		width: 100%;
		/* height: 340rpx; */
		height: 414rpx;
		box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
		margin: 40rpx 0;
		border-radius: 20rpx;
		position: relative;
	}

	.enterprise_tops {
		padding: 20rpx;
	}

	.customer_info_detail {
		padding: 8rpx 24rpx 20rpx 28rpx;
	}

	.customer_info {
		position: absolute;
		z-index: 6;
		text-align: center;
		height: 228rpx;
		width: 642rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 17px;
	}

	.enterprise_bg {
		display: block;
		width: 8rpx;
		height: 28rpx;
		background: #588BF3;
		margin-right: 10rpx;
	}

	.customer_info_img {
		position: absolute;
		z-index: 1;
		/* height: 228rpx; */
		height: 302rpx;
		width: 642rpx;
	}

	.manage_team_time {
		height: 68rpx;
		padding: 0 32rpx;
	}

	.dashed {
		height: 0px;
		border: 2rpx dashed rgba(255, 255, 255, 0.3);
	}

	.team_detail_info {
		padding: 0 32rpx;
		height: 70rpx;
	}

	.headImage {
		width: 408rpx;
		height: 408rpx;
		margin: 300rpx auto 40rpx;
	}
</style>
